<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main2" charset="utf-8"/>
        <asset:javascript src="echarts.min.js"/>
        <title>仪表板</title>
      
        
    </head>
    <body >
        
        <div id="one" style="height:900px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var labelCenter = {
                normal: {
                    show: true,
                    position: 'center',
                    formatter: '{b} \n {c} ({d}%)'
                },
            };
            var labelHidden = {
                normal: {
                    show: false,
                    position: 'center'
                },
            };
            var labelLineS = {
                normal: {
                    show: true,
                },
            };
            var chartOne = echarts.init(document.getElementById('one'));
            // 指定图表的配置项和数据
            var option1 = {
                title: {
                    text: '预约、任务和商机统计'
                },
                //backgroundColor: '#1b1b1b',
                tooltip: {},
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    bottom :'25%',
                    data:['跟进中','已成功','已失败']
                },
                
                series: [
                {
                    name:'本日预约',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['15%', '20%'],
                    data:[
                    ],                    
                },
                {
                    name:'本周预约',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['30%', '20%'],
                    data:[
                    ]
                },
                {
                    name:'本月预约',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['45%', '20%'],
                    data:[
                    ]
                },
                {
                    name:'本季预约',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['60%', '20%'],
                    data:[
                    ]
                },
                {
                    name:'本年预约',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['75%', '20%'],
                    data:[
                    ]
                },
                {
                    name:'本日任务',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['15%', '50%'],
                    data:[
                    ]
                },
                {
                    name:'本周任务',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['30%', '50%'],
                    data:[
                    ]
                },
                {
                    name:'本月任务',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['45%', '50%'],
                    data:[
                    ]
                },
                {
                    name:'本季任务',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['60%', '50%'],
                    data:[
                    ]
                },
                {
                    name:'本年任务',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['75%', '50%'],
                    data:[
                    ]
                },
                {
                    name:'商机-已成功',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['15%', '80%'],
                    data:[
                    ],
                    markPoint : {
                        symbol :'circle',
                        label:{
                            normal : {
                                show : true,
                                formatter: '{b}'
                            }
                        },
                        itemStyle : {},
                        data: [{
                            name: '已入围',
                            x: '15%',
                            y: '95%'
                        }],
                    }
                },
                {
                    name:'商机-跟进中',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['30%', '80%'],
                    data:[
                    ],
                    markPoint : {
                        symbol :'circle',
                        label:{
                            normal : {
                                show : true,
                                formatter: '{b}'
                            }
                        },
                        itemStyle : {},
                        data: [{
                            name: '需求分析',
                            x: '30%',
                            y: '95%'
                        }],
                    }
                },
                {
                    name:'商机-已失败',
                    type:'pie',
                    radius : ['15%', '20%'],
                    center : ['45%', '80%'],
                    data:[
                    ],
                    markPoint : {
                        symbol :'circle',
                        label:{
                            normal : {
                                show : true,
                                formatter: '{b}'
                            }
                        },
                        itemStyle : {},
                        data: [{
                            name: '解决方案',
                            x: '45%',
                            y: '95%'
                        }],
                    }
                },                
                ]
            };
            
            
            // 使用刚指定的配置项和数据显示图表。
            chartOne.setOption(option1);

            $.ajax({ 
                type: "post", 
                async: false, //同步执行 
                url: "/activity/visualization", 
                dataType: "json", //返回数据形式为json 
                
                success: function(result) { 
                    
                    chartOne.hideLoading(); //隐藏加载动画 
                    chartOne.setOption({ //渲染数据 
                        series: [
                            { 
                            // 根据名字对应到相应的系列 
                                name: '本日预约', 
                                data: [
                                        {value:result.amount[0],name:'本日已完成预约',label:labelCenter,labelLine:labelLineS},
                                        {value:result.amount[1],name:'本日未完成预约',label:labelHidden}
                                ]
                            },
                            { 
                            // 根据名字对应到相应的系列 
                                name: '本周预约', 
                                data: [
                                        {value:result.amount[2],name:'本周已完成预约',label:labelCenter,labelLine:labelLineS},
                                        {value:result.amount[3],name:'本周未完成预约',label:labelHidden}
                                ]
                            },
                            { 
                            // 根据名字对应到相应的系列 
                                name: '本月预约', 
                                data: [
                                        {value:result.amount[4],name:'本月已完成预约',label:labelCenter,labelLine:labelLineS},
                                        {value:result.amount[5],name:'本月未完成预约',label:labelHidden}
                                ]
                            },
                            { 
                            // 根据名字对应到相应的系列 
                                name: '本季预约', 
                                data: [
                                        {value:result.amount[6],name:'本季已完成预约',label:labelCenter,labelLine:labelLineS},
                                        {value:result.amount[7],name:'本季未完成预约',label:labelHidden}
                                ]
                            },
                            { 
                            // 根据名字对应到相应的系列 
                                name: '本年预约', 
                                data: [
                                        {value:result.amount[8],name:'本年已完成预约',label:labelCenter,labelLine:labelLineS},
                                        {value:result.amount[9],name:'本年未完成预约',label:labelHidden}
                                ]
                            },
                            { 
                            // 根据名字对应到相应的系列 
                                name: '本日任务', 
                                data: [
                                        {value:result.amount[10],name:'本日已完成任务',label:labelCenter,labelLine:labelLineS},
                                        {value:result.amount[11],name:'本日未完成任务',label:labelHidden}
                                ]
                            },
                            { 
                            // 根据名字对应到相应的系列 
                                name: '本周任务', 
                                data: [
                                        {value:result.amount[12],name:'本周已完成任务',label:labelCenter,labelLine:labelLineS},
                                        {value:result.amount[13],name:'本周未完成任务',label:labelHidden}
                                ]
                            },
                            { 
                            // 根据名字对应到相应的系列 
                                name: '本月任务', 
                                data: [
                                        {value:result.amount[14],name:'本月已完成任务',label:labelCenter,labelLine:labelLineS},
                                        {value:result.amount[15],name:'本月未完成任务',label:labelHidden}
                                ]
                            },
                            { 
                            // 根据名字对应到相应的系列 
                                name: '本季任务', 
                                data: [
                                        {value:result.amount[16],name:'本年已完成任务',label:labelCenter,labelLine:labelLineS},
                                        {value:result.amount[17],name:'本年未完成任务',label:labelHidden}
                                ]
                            },
                            { 
                            // 根据名字对应到相应的系列 
                                name: '本年任务', 
                                data: [
                                        {value:result.amount[18],name:'本年已完成任务',label:labelCenter,labelLine:labelLineS},
                                        {value:result.amount[19],name:'本年未完成任务',label:labelHidden}
                                ]
                            },
                            { 
                            // 根据名字对应到相应的系列 
                                name: '商机-已成功', 
                                data: [
                                        {value:result.amount2[1],name:'已入围',label:labelHidden},
                                        {value:result.amount2[4],name:'需求分析',label:labelCenter},
                                        {value:result.amount2[7],name:'解决方案',label:labelHidden},
                                        {value:result.amount2[10],name:'谈判',label:labelHidden},
                                        {value:result.amount2[13],name:'接近成功',label:labelHidden},
                                ]
                            },
                            { 
                            // 根据名字对应到相应的系列 
                                name: '商机-跟进中', 
                                data: [
                                        {value:result.amount2[0],name:'已入围',label:labelHidden},
                                        {value:result.amount2[3],name:'需求分析',label:labelCenter},
                                        {value:result.amount2[6],name:'解决方案',label:labelHidden},
                                        {value:result.amount2[9],name:'谈判',label:labelHidden},
                                        {value:result.amount2[12],name:'接近成功',label:labelHidden},
                                ]
                            },
                            { 
                            // 根据名字对应到相应的系列 
                                name: '商机-已失败', 
                                data: [
                                        {value:result.amount2[2],name:'已入围',label:labelHidden},
                                        {value:result.amount2[5],name:'需求分析',label:labelCenter},
                                        {value:result.amount2[8],name:'解决方案',label:labelHidden},
                                        {value:result.amount2[11],name:'谈判',label:labelHidden},
                                        {value:result.amount2[14],name:'接近成功',label:labelHidden},
                                ]
                            },                            
                        ] 
                    });               
                }, 
                error: function() { 
                    alert("请求数据失败!"); 
                } 
            }); 
            chartOne.on('click', function (params) {
                console.log(params);
                if(params.seriesIndex<10)
                {
                    window.location.href="/activity/index"; 
                }
                else if(params.seriesIndex<15)
                {
                    window.location.href="/opportunity/opportunityList"; 
                }
            });
            window.onresize = function(){
                chartOne.resize();
            }
        </script>
    </body>
</html>
